<template>
  <div>

  <h3 align="center">考勤管理</h3>
  <el-button type="primary" @click="add" size="mini">新增</el-button>
    <el-select v-model="dateInfo" @change="dataChange()" placeholder="请选择" style="width:100px;float:right;">
           <el-option label="一月" :value="1"></el-option>
           <el-option label="二月" :value="2"></el-option>
           <el-option label="三月" :value="3"></el-option>
           <el-option label="四月" :value="4"></el-option>
           <el-option label="五月" :value="5"></el-option>
           <el-option label="六月" :value="6"></el-option>
           <el-option label="七月" :value="7"></el-option>
           <el-option label="八月" :value="8"></el-option>
           <el-option label="九月" :value="9"></el-option>
           <el-option label="十月" :value="10"></el-option>
           <el-option label="十一月" :value="11"></el-option>
           <el-option label="十二月" :value="12"></el-option>
         </el-select>

        <el-input v-model="keyword" placeholder="请输入搜索内容" style="width: 20%"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="loaddata()">搜索</el-button>
    <el-table :data="attendanceList" style="width: 100%">

      <el-table-column label="考勤编号">
        <!-- 插槽，和迭代变量一个意思-->
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.attId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工编号">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.empId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="月份">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.month }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出勤">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="迟到">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeOne }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeTwo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="加班">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeThree }}</span>
        </template>
      </el-table-column>

      <el-table-column label="出差">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeFour }}</span>
          </template>
      </el-table-column>

      <el-table-column label="调班">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeFive }}</span>
        </template>
      </el-table-column>

      <el-table-column label="停工">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeSix }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.notes}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)">
          <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

     <div class="block">
       <!-- page-size 默认每页显示条数-->
       <el-pagination
         @size-change="selectPage"
         @current-change="handleCurrentChange"
         :current-page="curPage"
         :page-sizes="[1, 3, 5, 10]"
         :page-size="rows"
         layout="jumper,total, sizes, prev, pager, next"
         :total="total">
       </el-pagination>
 </div>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">

      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="员工编号">
          <el-col :span="22">
            <input type="hidden" v-model="attendanceForm.attId" />
            <el-input placeholder="请输入员工编号"  v-model="attendanceForm.empId"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="月份">
          <el-col :span="22">
            <el-input placeholder="请输入月份" v-bind:disabled="attendanceForm.attId" v-model="attendanceForm.month"></el-input>
          </el-col>
        </el-form-item>

          <el-form-item label="出勤">
       <el-col :span="22">
         <el-input placeholder="请输入出勤天数"  type="number" max="31" min="1"  v-model="attendanceForm.date "></el-input>
       </el-col>
     </el-form-item>

     <el-form-item label="迟到">
       <el-col :span="22">
         <el-input placeholder="请输入迟到次数" v-model="attendanceForm.typeOne"></el-input>
       </el-col>
     </el-form-item>

      <el-form-item label="请假">
       <el-col :span="22">
         <el-input placeholder="请输入请假次数" v-model="attendanceForm.typeTwo"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="加班">
       <el-col :span="22">
         <el-input placeholder="请输入奖惩金额" v-model="attendanceForm.typeThree"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="出差">
       <el-col :span="22">
         <el-input placeholder="请输入出差次数" v-model="attendanceForm.typeFour"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="调班">
       <el-col :span="22">
         <el-input placeholder="请输入奖惩金额" v-model="attendanceForm.typeFive"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="停工">
       <el-col :span="22">
         <el-input placeholder="请输入停工次数" v-model="attendanceForm.typeSix"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="备注">
       <el-col :span="22">
         <el-input placeholder="请输入备注" v-model="attendanceForm.notes"></el-input>
       </el-col>
     </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    name: "attendanceListEle",
    data() {
      return {
    //      options:[{
    //  value: '1',
    //  label: '一月'
    // }, {
    //  value: '2',
    //  label: '二月'
    // }, {
    //  value: '3',
    //  label: '三月'
    // }, {
    //  value: '4',
    //  label: '四月'
    // }, {
    //  value: '5',
    //  label: '五月'
    // }],
        dateInfo:'',
        keyword:'',
        attendanceList: [],
        title: "新增", //模态框的标题
        attendanceForm: { //表单请求对象
          // query:"",
          attId: null,
          empId: "",
          month: "",
          date:"",
          typeOne:"",
          typeTwo:"",
          typeThree:"",
          typeFour:"",
          typeFive:"",
          typeSix:"",
          notes:""

        },
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前页
        rows: 5, //每页显示条数
        isShow: false
      }
    },
    methods: {
      loaddata() { //加载数据
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/attendance/list",
          type: "get",
          data: {
           "page": mythis.curPage,
           "row": mythis.rows,
           "keyWord":mythis.keyword
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.attendanceList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage

          }
        })
      },
      dataChange(){
         var mythis =this;
       $.ajax({
         url: "http://localhost:8080/attendance/monthList",
         type: "get",
         data: {
            "month":mythis.dateInfo
         },
         dataType: "json",
         success: function(data) {
           console.log(data)
          mythis.attendanceList = data.info;
          mythis.total = data.total;
          mythis.totalPage = data.totalPage
 }
        })
          },


      add() { //打开新增模态框
        //显示模态框
         this.isShow = true;
        //更改模态框的标题
        this.title = "新增";
        //清除表单元素
        this.attendanceForm.attId = null;
        this.attendanceForm.empId= "";
        this.attendanceForm.month = "";
        this.attendanceForm.date = "";
        this.attendanceForm.typeOne = "";
        this.attendanceForm.typeTwo = "";
        this.attendanceForm.typeThree = "";
        this.attendanceForm.typeFour = "";
        this.attendanceForm.typeFive = "";
        this.attendanceForm.typeSix = "";
        this.attendanceForm.notes = "";
      },
      update(x) { //打开修改模态框
        //显示模态框
        this.isShow = true;
        //更改模态框的标题
        this.title = "修改";
        console.log(x)
        //把选中的值赋值给模态框的表单元素
        this.attendanceForm.attId = x.attId;
        this.attendanceForm.empId = x.empId;
       this.attendanceForm.month = x.month;
       this.attendanceForm.date = x.date;
       this.attendanceForm.typeOne = x.typeOne;
       this.attendanceForm.typeTwo = x.typeTwo;
       this.attendanceForm.typeThree = x.typeThree;
       this.attendanceForm.typeFour = x.typeFour;
       this.attendanceForm.typeFive = x.typeFive;
       this.attendanceForm.typeSix = x.typeSix;
       this.attendanceForm.notes = x.notes;
      },
      saveInfo() { //保存
        var url = ""
        if (this.title == "修改") {
          url = "http://localhost:8080/attendance/update"
        } else {
          url = "http://localhost:8080/attendance/add"
        }

        var mythis = this;
        $.ajax({
          url: url,
          type: "get",
          data: mythis.attendanceForm,
          dataType: "json",
          success: function(data) {
            console.log(data)
            //alert(data.info);
            //mythis.$alert(data.info)
            mythis.$message(data.info)
            if (data.info == "保存成功") {
              //关闭模态框
              mythis.isShow = false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
     delInfo(x) { //删除
              var is = confirm("你确定要删除数据吗?");
                     if (is) {
                       var mythis = this;
                       $.ajax({
                         url: "http://localhost:8080/attendance/del",
                         type: "get",
                         data: {
                           "attId": x.attId
                         },
                         dataType: "json",
                         success: function(data) {
                           console.log(data)
                           alert(data.info);
                           if (data.info == "删除成功") {
                             //刷新
                             mythis.loaddata();
                           }
                         }
                       })
                     }
                   },
      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },
      handleCurrentChange(v){//当前页触发事件
          this.curPage = v;
          this.loaddata();
      }
    },
    mounted() {
      this.loaddata();
      // console.log(this.$route.query.info)
    }
  }

</script>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
